<template>
    <div class="agentManage-view">
        <div class="agentManage-view-query">
            <div class="view-query-left">
                <div class="view-query-list">
                    <div class="view-query-list-text">经纪人姓名/电话</div>
                    <div class="view-query-list-input">
                        <el-input
                                placeholder="请输入经纪人姓名/电话"
                                v-model="value1"
                                clearable>
                        </el-input>
                    </div>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">注册时间</div>
                    <div class="view-query-list-input">
                        <el-date-picker
                                v-model="value2"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
            </div>
            <div class="view-query-left">
                <div class="view-query-list">
                    <div class="view-query-list-text">所属组织</div>
                    <div class="view-query-list-input">
                        <el-input
                                placeholder="请输入所属组织"
                                v-model="value3"
                                clearable>
                        </el-input>
                    </div>
                </div>
                <div class="view-query-list">
                    <div class="view-query-list-text">最近登录时间</div>
                    <div class="view-query-list-input">
                        <el-date-picker
                                v-model="value4"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                        </el-date-picker>
                    </div>
                </div>
                <div class="view-query-button"  @click="queryInfo">查 询</div>
                <div class="view-query-button2" @click="emptyingInfo">清 空</div>
                <div></div>
            </div>
        </div>
        <div class="agentManage-view-operation">
            <div @click="recharge">批量充值</div>
            <div @click="batchRemove">批量移除经纪人</div>
            <div @click="openUp">批量开通</div>
        </div>
        <div>
            <UserList :headlist="headlist" :contentlist="list" @selectList="selectList"></UserList>
            <Pagination :totalpag="totalpag" v-on:currentpage="currentpage"></Pagination>
        </div>
        <el-dialog
                        title="批量开通楼盘"
                        :visible.sync="dialogVisible"
                        :show-close="showimg">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item  prop="money">
                    <div class="agentManage-view-dialog">
                        <div class="agentManage-view-dialog-text">充值金额：</div>
                        <div class="agentManage-view-dialog-input">
                            <el-input
                                    placeholder="请输入"
                                    v-model="ruleForm.money"
                                    clearable>
                            </el-input>
                        </div>
                    </div>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="closesureOpen('ruleForm')">取 消</el-button>
                <el-button type="primary" @click="sureOpen('ruleForm')">确 定</el-button>
            </span>
        </el-dialog>
        <openUp :dialogFormVisible="showDetails" @close="closeForm"></openUp>
    </div>
</template>

<script>
    import UserList from '../common/user/UserList';
    import Pagination from '../common/Pagination';
    import openUp from '../common/Dialog/openUp';
    export default {
        name: "agentManage",
        data(){
            var checkAge = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('金额不能为空'));
                }else if (!Number.isInteger(value)) {
                    callback(new Error('请输入数字值'));
                }
            };
            return{
                dialogVisible:false,
                showseeAgents:false,
                showimg:false,
                showDetails:false,
                selectLists:"",
                ruleForm:{
                    money:"",
                },
                rules: {
                    money: [
                        { validator: checkAge, trigger: 'blur' }
                    ],
                },
                current:1,
                totalpag:0,
                value1:"",
                value2:"",
                value3:"",
                value4:"",
                headlist:{
                    checkout:true,
                    operation:{
                        type:true,
                        fromurl:"agentManage",
                    },
                    list:[
                        {
                            prop:"name",
                            label:"姓名",
                            width:"160",
                        },{
                            prop:"mobile",
                            label:"电话号码",
                            width:"130",
                        },{
                            prop:"majorRegion",
                            label:"主营区域",
                            width:"200",
                        }
                        ,{
                            prop:"registerTime",
                            label:"注册时间",
                            width:"200",
                        }
                        ,{
                            prop:"loginTime",
                            label:"最近登录时间",
                            width:"200",
                        }
                        ,{
                            prop:"storeName",
                            label:"所属组织",
                            width:"150",
                        }
                        ,{
                            prop:"linkerOpenTimes",
                            label:"开通楼盘数",
                            width:"110",
                        }
                        ,{
                            prop:"purchasePrice",
                            label:"消费金额（元）",
                            width:"140",
                        }
                        ,{
                            prop:"clientNum",
                            label:"客户数量",
                            width:"120",
                        }
                    ]},
                list:[],
            }
        },
        components: {
            UserList,
            Pagination,
            openUp
        },
        mounted(){
            this.getlist();
        },
        methods: {
            //查询
            queryInfo(){
                if (this.value1==""&&this.value2==""&&this.value3==""&&this.value4=="") {
                    this.$message({
                        message: '没有输入或选择查询内容',
                        type: 'warning'
                    });
                }else {
                    this.getlist()
                }
            },
            //清空
            emptyingInfo(){
                this.value1="";
                this.value2="";
                this.value3="";
                this.value4="";
                this.getlist();
            },
            //新增
            openUp(){
                if(!this.selectLists){
                    this.$alert('您还没勾选开通用户', '温馨提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                }else {
                    this.showDetails=true
                }
            },
            closeForm(){
                this.showDetails=false;
            },
            //批量开通
            recharge(){
                if(!this.selectLists){
                    this.$alert('您还没勾选充值用户', '温馨提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                }else {
                    this.dialogVisible=true
                }
            },
            //确定开通
            sureOpen(formName){
                let _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let params={
                            userIds:_this.selectLists,
                            price:_this.ruleForm.money,
                        }
                        _this.Api.setting.bathRecharge(params).then((data)=>{
                            console.log(data,">>>>>>>>>>>>>>")
                            this.dialogVisible=false
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });

            },
            //取消开通
            closesureOpen(formName){
                this.$refs[formName].resetFields();
                this.dialogVisible=false
            },
            //批量删除
            batchRemove(){
                let _this = this;
                let params={
                    agentIds:_this.selectLists,
                }
                if(!this.selectLists){
                    this.$alert('您还没勾选移除经纪人', '温馨提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                            this.$message({
                                type: 'info',
                                message: `action: ${ action }`
                            });
                        }
                    });
                }else {
                    this.$confirm('您确定要移除经纪人吗?', '温馨提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        _this.Api.setting.bathDelete(params).then((data)=>{
                            this.$message({
                                type: 'success',
                                message: '移除成功!'
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '移除失败'
                            });
                        });

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消移除'
                        });
                    });
                }
            },
            //选择
            selectList(val){
                this.selectLists=val
            },
            currentpage(currentpage){
                console.log("当前页，",currentpage)
                this.current=currentpage
                this.getlist()
            },
            getlist(){
                console.log(">>>>>>>>>>>>>>")
                let _this = this;
                let params={
                    nameOrMobile:this.value1,
                    registerBegin:this.value2[0],
                    registerEnd:this.value2[1],
                    loginBegin:this.value4[0],
                    loginEnd:this.value4[1],
                    distributor:this.value3,
                    current:_this.current,
                    size:10,
                }
                _this.Api.setting.agentManageList(params).then((data)=>{
                    console.log(data,">>>>>>>>>>>>>>")
                    _this.totalpag=data.data.total;
                    _this.list=data.data.records;
                })
            },
        }
    }
</script>
<style>
    .agentManage-view .el-dialog--small {
        width:443px;
    }
    .agentManage-view .el-form-item__label {
        text-align: right;
        vertical-align: middle;
        float: left;
        font-size: 14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(0,0,0,0.85);
        line-height:22px;
        padding: 7px 0px 0px 30px;
        box-sizing: border-box;
    }
    .agentManage-view  .el-dialog__header{
        height: 50px;
        padding: 10px ;
        text-align: left;
        font-size:16px;
        font-family:PingFangSC-Medium;
        font-weight:500;
        color:rgba(0,0,0,0.85);
        line-height:24px;

    }
    .agentManage-view .el-dialog__body{
        border-top: 1px #E9E9E9 solid;
        border-bottom: 1px #E9E9E9 solid;
    }
</style>
<style scoped rel="stylesheet/scss" lang="scss">
.agentManage-view{
    background-color: #ffffff;
    margin: 20px;
    .agentManage-view-query{
        padding-top: 24px;
        padding-top: 24px;
        .view-query-left{
            display: flex;
            .view-query-list{
                display: flex;
                margin-bottom: 24px;
                .view-query-list-text{
                    min-width: 140px;
                    font-size:14px;
                    font-family:PingFangSC-Regular;
                    font-weight:400;
                    color:rgba(0,0,0,1);
                    line-height:32px;
                    text-align: right;
                    margin-right: 8px;
                }
                .view-query-list-input{
                    width:240px;
                    height:32px;
                    background:rgba(255,255,255,1);
                    border-radius:4px;
                }

            }
            .view-query-button{
                width:65px;
                height:32px;
                background:rgba(24,144,255,1);
                border-radius:4px;
                font-size:14px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(255,255,255,1);
                line-height:32px;
                text-align: center;
                cursor: pointer;
                margin-left: 48px;
                margin-right: 8px;
            }
            .view-query-button2{
                width:65px;
                height:32px;
                background:rgba(255,255,255,1);
                border-radius:4px;
                border:1px #D9D9D9 solid;
                font-size:14px;
                font-family:PingFangSC-Regular;
                font-weight:400;
                color:rgba(0,0,0,0.65);
                line-height:32px;
                text-align: center;
                cursor: pointer;
            }
        }
    }
    .agentManage-view-operation{
        padding-left: 32px;
        margin-bottom: 24px;
        display: flex;
    div{
        background:rgba(16,165,22,1);
        border-radius:4px;
        padding: 6px 16px;
        font-size:14px;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,255,255,1);
        line-height:20px;
        margin-right: 16px;
        cursor: pointer;
    }
    }
    .agentManage-view-dialog{
        display: flex;
        margin-left: 32px;
        .agentManage-view-dialog-text{
            font-size:14px;
            font-family:PingFangSC-Regular;
            font-weight:400;
            color:rgba(0,0,0,1);
            line-height:32px;
        }
        .agentManage-view-dialog-input{
            width:250px;
            height:32px;
            background:rgba(255,255,255,1);
            border-radius:4px;
        }
    }
}
</style>